<template>
	<div class="lucky-bag-popup">
		<cl-popup direction="center" :force-update="false" :visible.sync="visible">
			<img class="bg" src="@/assets/2/images/red-package/lucky-bag-bg.png" alt="" />

			<div class="wrap">
				<p class="title">恭喜您获得福袋礼包</p>
				<p class="desc">本期达到{{ info.quota }}金币里程碑奖励</p>

				<ul class="gift">
					<li class="gold">
						<img src="@/assets/2/images/red-package/gold-big.png" alt="" />
						<p>金币+{{ info.goldAmount }}</p>
					</li>

					<li class="goods" v-if="info.mdId > 0">
						<img :src="info.pic" alt="" />
						<p>{{ info.title }}</p>
						<p>福利价￥{{ info.finalprice }}</p>
					</li>
				</ul>

				<button class="rec" @click="next">领取福袋</button>

				<p class="tips" v-if="info.mdId > 0">领取后打开淘宝获得，数量有限先到先得</p>
			</div>
		</cl-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import ClPopup from '@/components/popup';
import { Toast } from 'vant';

export default {
	components: {
		ClPopup
	},

	data() {
		return {
			visible: false,
			info: {}
		};
	},

	methods: {
		open(data) {
			this.visible = true;
			this.info = data;
		},

		close() {
			this.visible = false;
		},

		next: _.debounce(function() {
			this.$service.bwbt.bwbtGold
				.getLuckyBag({
					quota: this.info.quota
				})
				.then(res => {
					console.log('领取福袋', res);
					Toast('领取成功');

					if (res.tkl) {
						BestpayHtml5.System.setClipboardContent({
							data: res.tkl
						});
					}

					this.close();
					this.$store.dispatch('GET_BWBT_USERINFO');
				})
				.catch(err => {
					Toast(err.message);
				});
		}, 300)
	}
};
</script>

<style lang="scss" scoped>
.lucky-bag-popup {
	/deep/.cl-popup {
		border-radius: 20px 20px 0 0;
		background-color: transparent;

		&__container {
			height: 900px;
			overflow: visible;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			top: -80px;
		}
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 910px;
		width: 600px;
		z-index: 2;
	}

	.title {
		color: #ff4115;
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		width: 100%;
		position: absolute;
		top: 310px;
	}

	.desc {
		color: #717076;
		font-size: 24px;
		text-align: center;
		width: 100%;
		margin-top: 10px;
		position: absolute;
		top: 370px;
	}

	.gift {
		display: flex;
		width: 450px;
		font-size: 24px;
		margin-top: 200px;

		li {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.gold {
				position: relative;
				top: -20px;

				img {
					display: block;
					height: 200px;
					width: 200px;
				}

				p {
					position: relative;
					top: -20px;
				}
			}

			&.goods {
				img {
					height: 148px;
					width: 148px;
					display: block;
					background-color: #eee;
					margin-bottom: 10px;
					border-radius: 10px;
				}

				p {
					&:nth-child(2) {
						font-size: 26px;
						font-weight: 500;
						height: 40px;
						width: 200px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					&:last-child {
						color: #717076;
					}
				}
			}
		}
	}

	.rec {
		height: 68px;
		border-radius: 30px;
		background-image: linear-gradient(to bottom, #f83f12, #ff542d);
		color: #fff;
		font-size: 26px;
		letter-spacing: 2px;
		border: 0;
		width: 360px;
		box-shadow: 0 4px 1px 1px #d9340b;
		position: absolute;
		bottom: 130px;
	}

	.tips {
		position: absolute;
		bottom: 70px;
		color: #717076;
		font-size: 24px;
	}
}
</style>
